<template>
  <div id="detailsBar">
    <div class="bar" ref="bar"></div>
  </div>
</template>

<script>
export default {
  props: {
    starXData: Array | Object,
    starYData: Array | Object,
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawbar();
  },

  methods: {
    drawbar() {
      let myChart = this.$echarts.init(this.$refs.bar);
      let option = {
        color: ["#f3ac62"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "none", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return params[0].axisValue + "</br>" + params[0].data + "%";
            //  if (params.value) {
            //     return (
            //       params.name +
            //       ":" +
            //       ((params.value / total) * 100).toFixed(2) +
            //       "%"
            //     );
            //   } else {
            //     return params.name + ":" + 0;
            //   }
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.starXData,
            axisTick: {
              alignWithLabel: false,
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(195,202,223,.2)",
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              
                interval: 0,
                // rotate: 20,
                // fontSize: 12,
                // margin: 12,
             
              show: true,
              textStyle: {
                // 字体配置
                color: "rgba(195,202,223,.5)",
                fontSize: "12",
                lineHeight: 14,
              },
              //   rotate:40 // 是否旋转
            },
            splitLine: {
              //去掉网格线
              show: false,
              color: "#fff",
            },
          },
        ],
        yAxis: {
          show: false,
          //  name: "商品总数/动销商品数",
          axisLabel: {
            show: false,
          },
          textStyle: {
            // 字体配置
            color: "rgba(195,202,223,.5)",
            fontSize: "12",
            lineHeight: 14,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          type: "value",
        },
        series: [
          {
            barWidth: 12, //柱状宽度
            // name: "直接访问",
            type: "bar",
            data: this.starYData,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [6, 6, 0, 0],
              },
            },
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option);
      this.$once('hook:beforeDestroy', () => {
        myChart.dispose();
        myChart = null;
      });
//       myChart.setOption({
//         graphic: {
//           type: "image",
//           bounding: "raw",
//           top: "60%",
//           left: "5%",
// /*           style: {
//             image:
//               "",
//             width: "70",
//             height: "30",
//           }, */
//         },
//       });
    },
  },
};
</script>
<style lang='less' scoped>
#detailsBar {
  width: 400px;
  height: 170px;
  margin: auto;
  .bar {
    width: 100%;
    height: 100%;
  }
}
</style>